<template>
  <div :class="closeLabel === '关闭' ? 'quote-box box-height' : 'quote-box'">
    <div :class="closeLabel === '关闭' ? 'quote-content w1200' : 'quote-content'">
      <details-head v-model="buttonStatus"
                    :title="`报价详情`"
                    :multiple="true"
                    :custom-list="btnGroup"
                    :close-label="closeLabel"
                    close-flag
                    :loading="loading"
                    @change="handleSubmit"
                    @close="handelClose" />
      <div class="pad20">
        <el-row :gutter="40"
                class="des-wrap">
          <el-col class="wrap-left"
                  :span="8">
            <div class="text-center f18">
              <b v-if="waybillDetails.fromAddress">
                {{ waybillDetails.fromAddress.city === '市辖区' ? waybillDetails.fromAddress.province : waybillDetails.fromAddress.city }}
              </b>
              <icon-svg class="font-style"
                        class-name="iconClass"
                        icon-name="jiantou" />
              <b v-if="waybillDetails.toAddress">
                {{ waybillDetails.toAddress.city === '市辖区' ? waybillDetails.toAddress.province : waybillDetails.toAddress.city }}
              </b>
            </div>
            <quote-list :info="quoteData"
                        :config-data="configData"
                        :icon-name="iconName"
                        :content="content" />
          </el-col>
          <el-col :span="16">
            <el-row class="mb20">
              <el-col :span="12">
                <descriptions v-if="waybillDetails.customer"
                              :info="
                    Object.assign(
                      {},
                      waybillDetails.customer,
                      waybillDetails.fromAddress,
                      waybillDetails.fromContact
                    )
                  "
                              type="sender"
                              :from-time="waybillDetails.fromTime"
                              :company="waybillDetails.customer.showCustomerName" />
              </el-col>
              <el-col :span="12">
                <descriptions v-if="waybillDetails.consignee"
                              :info="
                    Object.assign(
                      {},
                      waybillDetails.consignee,
                      waybillDetails.toAddress,
                      waybillDetails.toContact
                    )
                  "
                              type="consign"
                              :to-time="waybillDetails.toTime"
                              :company="waybillDetails.consignee.consigneeName" />
              </el-col>
              <icon-svg v-if="matchId && !refresh"
                        class-name="stampSty"
                        icon-name="a-ziyuan4" />
              <icon-svg v-if="refresh"
                        class-name="stampSty"
                        icon-name="a-ziyuan3" />
            </el-row>
            <total-list v-if="waybillDetails"
                        class="mb20"
                        base
                        :info="
                Object.assign(
                  {},
                  waybillDetails.waybillCache,
                  waybillDetails.transportRequirement
                )
              "
                        :config-data="totalData" />
            <simple-list :info="
                Object.assign(waybillDetails.transportRequirement || {}, {
                  orderDesc: waybillDetails.desc,
                  calculateValue: waybillDetails.waybillCache && waybillDetails.waybillCache.calculateValue
                })
              "
                         :config-data="transportQuoteInfoArr" />
          </el-col>
        </el-row>
      </div>
      <layer title="费用信息">
        <transport-quote v-if="wayBillColumn.length"
                         ref="transportQuote"
                         :disabled="transportDisabled"
                         :quotation-column.sync="wayBillColumn"
                         :data-list="priceList"
                         :status="status"
                         :waybill-quote-bargain="waybillQuoteBargain"
                         :match-id="matchId"
                         :match-column="matchColumn"
                         :match-data="matchData"
                         :surcharge-fees="matchSurchargeData"
                         @returnData="returnData"
                         @onTotal="handleQuoteTotal" />
        <bargain v-show="!carrierExtraType || (carrierExtraType && (surcharge || quoteDetail.status === 2))"
                 ref="bargainRef"
                 class="mb20"
                 :disabled="addDisabled"
                 :data-list="addCostList"
                 :status="status"
                 :fee-type-arr="feeTypeArr"
                 :add-action-disabled="addActionDisabled"
                 :surcharge="surcharge"
                 :waybill-quote-bargain="waybillQuoteBargain"
                 @onTotal="handleQuoteTotal" />
        <p class="fontSty1">
          {{!carrierExtraType || (carrierExtraType && (surcharge || quoteDetail.status === 2)) ? "报价费用+补充费用合计(含税费):" : "报价费用(含税费):" }}
          <span class="fontSty2">{{ totalFee || 0 }}</span>
          <el-tooltip v-if="minimumFee"
                      placement="top"
                      effect="light">
            <div slot="content">最低费用匹配说明：<br /> {{tips}}</div>
            <icon-svg class-name="iconSty"
                      icon-name="bangzhuzhongxin1" />
          </el-tooltip>
        </p>
        <pay-type ref="payType"
                  :disabled="payDisabled"
                  :status="status"
                  :arrive-pay-fee-disabled="arrivePayFeeFlag"
                  :collection-fee-disabled="collectionFeeFlag"
                  :prepay-fee-disabled="prepayFeeFlag"
                  :waybill-price="waybillPrice"
                  :data-list="payList"
                  :waybill-quote-bargain="waybillQuoteBargain" />
        <div v-show="!carrierExtraType"
             class="mt25">
          <el-input v-if="!descDisabled"
                    v-model="remarks"
                    type="textarea"
                    :rows="4"
                    maxlength="200"
                    show-word-limit
                    placeholder="请输入备注说明"></el-input>
          <p v-else
             class="remark wrap">备注：{{ remarks }}</p>
        </div>
      </layer>
      <layer title="其他信息">
        <el-row class="mb10">
          <el-col :span="2"> 备注 </el-col>
          <el-col class="wrap"
                  :span="22"> {{ waybillDetails.desc }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="2"> 附件 </el-col>
          <el-col :span="22">
            <attachments v-if="files.length > 0"
                         :value="files" />
          </el-col>
        </el-row>
      </layer>
      <layer v-show="isTrack"
             title="跟踪信息">
        <Information :value="track" />
      </layer>
      <reject :id="quotationId"
              :label="'reason'"
              :api="api.refuse"
              :visible.sync="visible"
              id-name="quotationId"
              @back="handelClose" />
    </div>
  </div>
</template>

<script src="./quotationDetail.js"></script>

<style lang="scss" scoped>
/deep/ .el-input.is-disabled .el-input__inner {
  color: var(--prev-color-text-primary);
}
.box-height {
  height: calc(100vh) !important;
}
.quote-box {
  height: calc(100vh - 80px);
  overflow-x: hidden;
  overflow-y: scroll;
}
.quote-content {
  margin: 0 auto;
  background: var(--prev-bg-white);
}
.pad20 {
  padding: 20px;
}
.plr20 {
  padding-left: 20px;
  padding-right: 20px;
}
.plr40 {
  padding-left: 40px;
  padding-right: 40px;
}
.remark {
  background: #fafafa;
  padding: 15px;
}
.wrap {
  word-break: break-all;
}
.des-wrap {
  overflow: hidden;
  .wrap-left {
    position: relative;
    &:after {
      content: "";
      width: 1px;
      height: 2000px;
      background: #ebebeb;
      position: absolute;
      right: 10px;
      top: 0;
    }
  }
}
</style>
<style scoped>
.font-style {
  font-size: 36px;
  margin: 0 10px;
  position: relative;
  top: 5px;
}
.fontSty1 {
  color: var(--prev-color-text-ashes);
  display: flex;
  justify-content: flex-end;
  height: 36px;
  line-height: 36px;
}
.fontSty2 {
  color: var(--prev-color-primary);
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
}
.stampSty {
  width: 126px;
  height: 126px;
  position: absolute;
  left: 80%;
}
.iconSty {
  margin: 14px 10px;
}
.w1200 {
  width: 1200px;
}
.mt25 {
  margin-top: 25px;
}
</style>
